<template>
  <div class="container">
    <div class="item" v-for="(item, index) in list" :key="index" @click="$router.push(`/order/detail/${item.id}`)">
      <div class="left">
        <!-- <div>
                    <span>姓名：</span>
                    <span>{{ item.customerName }}</span>
                </div> -->
        <!-- <div>
                    <span>手机号：</span>
                    <span>{{ item.customerPhone }}</span>
                </div> -->
        <div>
          <span>产品名称：</span>
          <span>{{ item.productName }}</span>
        </div>
        <div>
          <span>创建时间：</span>
          <span>{{ item.updateTime }}</span>
        </div>
      </div>
      <div
        class="right"
        :style="
          !item.deliveryType
            ? 'background-color: #ff976a'
            : 'background-color: #07c160'
        "
      >
        <span v-if="!item.deliveryType">待领取</span>
        <span v-else>已领取</span>
      </div>
    </div>
    <div class="no-data" v-if="isEnd && !isEmpty">
      <van-button plain type="default">没有更多了...</van-button>
    </div>
    <div v-if="isEnd && isEmpty" class="no-content">当前内容为空~</div>
  </div>
</template>

<script>
import { getCustomerOrderList } from "@/api/order";
import { pagination, CUSTOMERTYPE } from "@/utils/enumConfig";
import { Dialog, Popup, Toast } from "vant";
export default {
  data() {
    return {
      CUSTOMERTYPE: CUSTOMERTYPE,
      pagination: this.$_.cloneDeep(pagination),
      list: [],
      isEnd: true,
      isEmpty: true,
      isLoading: false,
      customerPhone: "",
    };
  },
  async mounted() {
    let customerPhone = this.$route.query.customerPhone;
    this.customerPhone = customerPhone;
    await this.getCustomerOrderList(this.pagination);
  },
  methods: {
    async getCustomerOrderList(pagination) {
      this.isLoading = true;
      let { size } = pagination;
      let list = await getCustomerOrderList({
        ...pagination,
        customerPhone: this.customerPhone,
        size: 1000,
      });
      if (list) {
        this.list = this.list.concat(list);
        this.pagination = pagination;
        this.isEnd = list.length < size ? true : false;
        this.isEmpty = this.list.length === 0 ? true : false;
      }
      this.isLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  padding: 10px 20px;
  color: #333;
  font-size: 14px;
  border-bottom: 1px solid #f1f1f1;
  box-sizing: border-box;
  margin-top: 10px;
  .left {
    flex: 1;
    & > div {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .right {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.load-more,
.no-data {
  width: 100%;
  button {
    width: 100%;
    color: #666;
  }
}
.fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
  button {
    width: 100%;
  }
}
.container {
  padding-bottom: 20%;
  box-sizing: border-box;
}
.no-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #888;
}
</style>